<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<view class="desc">
			<text>头像</text>
			<text>昵称</text>
			<text>地区</text>
		</view>
		<mescroll-uni ref="mescrollRef" height="686" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
		 :up="upOption">
			<view class="list">
				<view class="list-item" v-for="(item, index) in dataList" :key="index">
					<view class="avatar">
						<image :src="item.avatar" @error="avatarError(index)"></image>
					</view>
					<view class="name ellipsis">
						<text>{{item.name}}</text>
					</view>
					<view class="area ellipsis">
						<text>{{item.district | districtFormat}}</text>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import Api from '@/common/api';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";


	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props:{
			dataType: String
		},
		data() {
			return {
				imgsrc: Api.imgsrc,
				imgIcon: Api.imgIcon,
				listHeight:686,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 6, // 每页数据的数量,默认3
					},
					noMoreSize: 6, //配置列表的总数量要大于等于 noMoreSize 条菜显示 textNoMore 的提示
					textNoMore: '-- 我是有底线的 --',
					empty: {
						tip: '当前暂无任何数据',
						icon: '/static/empty/empty-data.png'
					}
				},
				dataList: []
			}
		},
		computed: {

		},
		filters:{
			districtFormat(val){
				let formatval = val;
				if(Object.prototype.toString.call(val) == '[object Null]'){
					formatval = '暂无地区'
				}
				return formatval;
			}
		},
		methods: {
			/**
			 * @param {Object} page
			 * @description 下来刷新回调
			 */
			upCallback(page) {
				let pageNum = page.num; //页码。默认从1开始
				this.loadData(pageNum);
			},
			
			async loadData(pageNum) {
				let params = {
					"page": pageNum,
					"type": this.dataType,
					"level": this.i + 1
				}, method = 'POST', data = await Api.apiCall(method, Api.agent.get_agent_user, params)
				if (data) {
					console.log(`pageNum: ${pageNum}`)
					if (pageNum == 1) {
						this.preEveryTimeRequestNum = 0;
						this.dataList = []; //如果是第一页需手动置空列表
					}
					data.users.map(e=>{
						return e.avatar = e.avatar.includes('http') ? e.avatar : this.imgIcon + e.avatar
					})
					let hasNext = this.preEveryTimeRequestNum <= data.users.length,
						curListLen = data.users.length;
					this.preEveryTimeRequestNum = data.users.length;


					if (data.users.length > 0) {
						this.dataList = this.dataList.concat(data.users);
						this.$nextTick(() => {
							this.mescroll.endSuccess(curListLen, hasNext);
						});
					} else {
						this.$nextTick(() => {
							this.mescroll.endSuccess(curListLen)
						});
					}
					// uni.$emit(`levelCount`, {
					// 	dataListCount: this.dataList.length,
					// 	tabIndex: this.i
					// });
				} else {
					//  请求失败,隐藏加载状态
					console.log(`error`)
					this.mescroll.endErr()
				}

			},
			avatarError(index){
				this.dataList[index].avatar = '/static/avatar.png'
			}
		}
	}
</script>

<style lang="scss">
	.desc{
		display: flex;
		height: 98upx;
		justify-content: space-between;
		align-items: center;
		padding: 0 65upx 0 45upx;
		box-sizing: border-box;
		font-size: 28upx;
		color: #767778;
		width: 100%;
		border-bottom: 1upx solid rgba(243,245,247,1);
	}
	.list{
		.list-item{
			display: flex;
			height: 98upx;
			justify-content: space-between;
			align-items: center;
			padding: 0 32upx;
			box-sizing: border-box;
			font-size: 28upx;
			color: #232323;
			width: 100%;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				width: 95%;
				bottom: 0;
				margin: auto;
				left: 0;
				right: 0;
				height: 1upx;
				background-color: rgba(243,245,247,1);
			}
			.avatar{
				width: 72upx;
				height: 72upx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.name{
				width: 200upx;
				text-align: center;
			}
			.area{
				width: 120upx;
				text-align: center;
			}
		}
	}
</style>
